<template>
  <page-header-wrapper :title="false">
    <a-card title="发票库存管理">
      <template slot="extra">
        <a-button icon="plus" size="small" type="primary" @click="onAddCompany">添加发票公司</a-button>
      </template>
      <div class="table-page-search-wrapper">
        <a-form-model :model="queryParam" layout="inline">
          <a-row :gutter="48">
            <a-col :md="6" :sm="24">
              <a-form-model-item label="公司名称">
                <a-input type="text" v-model="queryParam['filter[company_name]']" placeholder="请输入要查询的公司名称" />
              </a-form-model-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <span class="table-page-search-submitButtons">
                <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
                <a-button style="margin-left: 8px" @click="reset">重置</a-button>
              </span>
            </a-col>
          </a-row>
        </a-form-model>
      </div>
      <div class="table-operator">
        <s-table
          bordered
          ref="table"
          :row-key="(record) => record.id"
          :columns="invoiceColumns"
          :data="invoiceData"
        >
          <template slot="invoice_type" slot-scope="text">
            {{invoiceTypeOpts[text]}}
          </template>
          <template slot="tax_point" slot-scope="text,record">
            <a-button icon="edit" type="link" size="small" @click="pointModal(record.id)">{{text}}%</a-button>
          </template>
          <!--        <template slot="p_stock" slot-scope="text,record">-->
          <!--          <a-button icon="edit" type="link" size="small" @click="stockModal('p_stock', record.id)">{{text}}</a-button>-->
          <!--        </template>-->
          <template slot="stock" slot-scope="text,record">
            <a-button icon="edit" type="link" size="small" @click="stockModal(record.id)">{{text}}</a-button>
          </template>
          <template slot="action" slot-scope="text, record">
            <a-button icon="delete" size="small" type="danger" @click="onDel(record.id)">删除</a-button>
          </template>
        </s-table>
      </div>
    </a-card>
    <a-modal
      :destroyOnClose="true"
      :confirm-loading="loading"
      title="添加发票"
      v-model="visible"
      @ok="onAddInvoice"
      @cancel="onCancel"
    >
      <a-form-model
        ref="invoiceForm"
        :model="invoiceForm"
        :rules="invoiceRules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-form-model-item label="发票类型" prop="invoice_type">
          <a-select v-model="invoiceForm.invoice_type" placeholder="选择发票类型">
            <a-select-option v-for="(item,index) in invoiceTypeOpts" :key="index" :value="index">{{item}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item label="公司名称" prop="company_name">
          <a-input v-model="invoiceForm.company_name" placeholder="输入开票公司的全称" />
        </a-form-model-item>
        <a-form-model-item label="发票库存" prop="stock">
          <a-input-number v-model="invoiceForm.stock" placeholder="专票库存" />
        </a-form-model-item>
        <a-form-model-item label="税点" prop="tax_point">
          <a-input-number
            v-model="invoiceForm.tax_point"
            :formatter="value => `${value}%`"
            :parser="value => value.replace('%', '')"
          />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <a-modal
      title="编辑当前公司税点"
      v-model="pointVisible"
      :confirm-loading="loading"
      :width="300"
      @ok="onEditCompany('point')"
      @cancel="onCancel"
    >
      <a-form-model
        ref="invoiceForm"
        :model="invoiceForm"
      >
        <a-form-model-item label="税点" prop="tax_point">
          <a-input-number
            v-model="invoiceForm.tax_point"
            :formatter="value => `${value}%`"
            :parser="value => value.replace('%', '')"
          />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
    <a-modal
      title="编辑发票库存"
      v-model="stockVisible"
      :confirm-loading="loading"
      :width="300"
      @ok="onEditCompany('stock')"
      @cancel="onCancel"
    >
      <a-form-model
        ref="invoiceForm"
        :model="invoiceForm"
      >
        <a-form-model-item label="库存" prop="stock">
          <a-input-number v-model="invoiceForm.stock" />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </page-header-wrapper>
</template>

<script>
import { STable } from '@/components'
import invoiceColumns from '@/columns/invoice'
import { getAddCompany, postAddCompany, delCompany, editPoint, getCompany, editStock } from '@/api/invoice'

export default {
  components: {
    STable
  },
  name: 'InvoiceSetting',
  data () {
    return {
      invoiceColumns: invoiceColumns.invoice_setting,
      invoiceData: parameters => {
        return getCompany(Object.assign(parameters, this.queryParam)).then(res => {
          this.invoiceTypeOpts = res.result.invoice_type_opts
          return res.result
        })
      },
      labelCol: { span: 4 },
      wrapperCol: { span: 18 },
      invoiceForm: {},
      invoiceRules: {
        invoice_type: [{ required: true, message: '必须选择发票类型', trigger: 'change' }],
        company_name: [{ required: true, message: '必须填写公司名称', trigger: 'blur' }],
        tax_point: [{ required: true, message: '必须填写此公司税点', trigger: 'blur' }],
        stock: [{ required: true, message: '必须填写发票剩余数量', trigger: 'blur' }]
      },
      visible: false,
      pointVisible: false,
      stockVisible: false,
      loading: false,
      queryParam: {},
      selectedRowKeys: [],
      invoiceTypeOpts: {}
      // stockType: ''
    }
  },
  methods: {
    onAddInvoice () {
      const app = this
      const data = {}
      app.loading = true
      app.$refs.invoiceForm.validate(valid => {
        if (valid) {
          for (const k in app.invoiceForm) {
            data['invoice[' + k + ']'] = app.invoiceForm[k]
          }
          postAddCompany(data).then(res => {
            if (res.status === 0) {
              app.loading = false
              app.visible = false
              app.$refs.table.refresh(true)
            } else {
              app.$warning({
                title: res.msg
              })
              app.loading = false
            }
          })
        } else {
          app.loading = false
          return false
        }
      })
    },
    stockModal (id) {
      this.invoiceForm.id = id
      // this.stockType = type
      this.stockVisible = true
    },
    pointModal (id) {
      this.invoiceForm.id = id
      this.pointVisible = true
    },
    onEditCompany (type) {
      const app = this
      app.loading = true
      if (type === 'stock') {
        editStock(app.invoiceForm).then(res => {
          app.onCancel()
          app.$refs.table.refresh()
        })
        // if (app.stockType === 'p_stock') {
        //   editPStock(app.invoiceForm).then(res => {
        //     app.onCancel()
        //     app.$refs.table.refresh()
        //   })
        // } else {
        //   editZStock(app.invoiceForm).then(res => {
        //     app.onCancel()
        //     app.$refs.table.refresh()
        //   })
        // }
      } else if (type === 'point') {
        editPoint(app.invoiceForm).then(res => {
          app.onCancel()
          app.$refs.table.refresh()
        })
      }
      // app.$refs.invoiceForm.validate(valid => {
      //   if (valid) {
      //     data['stock'] = app.invoiceForm.stock
      //     if (type === 'stock') {
      //       console.log(data)
      //       editStock(data).then(res => {
      //         app.onCancel()
      //         app.$refs.table.refresh()
      //       })
      //     } else if (type === 'point') {
      //       data['point'] = app.invoiceForm.point
      //       editPoint(data).then(res => {
      //         app.onCancel()
      //         app.$refs.table.refresh()
      //       })
      //     }
      //   } else {
      //     return false
      //   }
      // })
    },
    onCancel () {
      this.loading = false
      this.pointVisible = false
      this.stockVisible = false
      this.visible = false
      this.invoiceForm = {}
    },
    onDel (id) {
      this.$confirm({
        title: '是否删除当前公司发票信息',
        onOk: () => {
          delCompany(id).then(res => {
            this.$refs.table.refresh(true)
          })
        }
      })
    },
    onSelectChange (selectedRowKeys) {
      this.selectedRowKeys = selectedRowKeys
    },
    onAddCompany () {
      getAddCompany().then(res => {
        this.invoiceTypeOpts = res.result.invoice_type
        this.visible = true
      })
    },
    reset () {
      this.queryParam = {}
      this.$refs.table.refresh(true)
    }
  }
}
</script>

<style scoped>

</style>
